<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>过渡</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 300px;
				height: 300px;
				background-color: lightskyblue;
				/* 过渡:transition.过渡的属性，过渡时间 速度
				 ease:默认值，慢-快-慢
				 linear:匀速
				 ease-in:低速开始
				 ease-out:低速结束
				 ease-in-out:低速开始和结束
				 */
				/* transition: width 3s linear 1s; */
				/* all:所有的 */
				transition: all 3s linear;
			}
			/* 鼠标悬停 */
			.box:hover .er{
				/* width: 800px;
				height: 500px; */
				background-color: aqua;
				transform-origin: center;
				transform: translateY(-100px) scale(2) rotateY(45deg);
				/* transform: rotatey(-90deg); */
				/* transform: skewY(60deg); */
				/* transform: scale(-2); */
				/* transform: translatey(-100px); */
				/* 转换transform:
				1.位移translate:
				 (x轴方向(translatex),y轴方向(translatey))
				 位移的值可以是百分比，对应自身宽高的百分比
				2.缩放scale():(倍数+deg)
				(x轴方向(scalex),y轴方向(scaley))
				3.旋转rotate:
				(x轴方向(rotatex),y轴方向(rotatey))
				rotatex(-45deg):x轴方向反方向45°方向旋转
				  */
			}
		</style>
	</head>
	<body>
		<div class="box">
			<!-- <div class="er"></div> -->
		</div>
	</body>
</html>
